<template>
  <a-drawer v-model:open="open" :mask-closable="false" class="custom-class" root-class-name="root-class-name"
    width="40%" :title="props.type == 'add' ? '新增' : '编辑'" placement="right" @close="closebtn">
    <Form />
    <template #footer>
      <div style="display: flex; justify-content: flex-end">
        <a-button style="margin-right: 8px">取消</a-button>
        <a-button type="primary" @click="onSubmit">确定</a-button>
      </div>
    </template>
  </a-drawer>
</template>
<script lang="ts" setup>
import { message } from "ant-design-vue";
import { computed, watch } from "vue";
import { useVbenForm, z } from "#/adapter/form";
import * as api from "#/api/core/nutrition.ts";



const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: "add",
  },
  editdata: {
    type: Object,
    default: () => { },
  },
  unitlist: {
    type: Array,
    default: [],
  },
  catelist: {
    type: Array,
    default: [],
  },
});
const emits = defineEmits(["update:value", "submit", "close"]);

const open = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits("update:value", val);
  },
});


watch(() => props.editdata,

  async (newV) => {


    if (newV) {
      await formApi.setValues(newV)
    } else {

      formApi.resetForm()
    }

  })

const unitlistcom = computed({
  get() {
    return props.unitlist.map((item) => {
      return {
        ...item,
        label: item.displayName,
        value: item.code,
      };
    });
  },
});



const catelistcom = computed({
  get() {
    return props.catelist.map(item => {
      return {
        ...item,
      }
    });
  },
});






const [Form, formApi] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: "w-full",
    },
  },
  showDefaultActions: false,

  // 垂直布局，label和input在不同行，值为vertical
  // 水平布局，label和input在同一行
  scrollToFirstError: true,
  layout: "vertical",
  schema: [
    {
      // 组件需要在 #/adapter.ts内注册，并加上类型
      component: "Input",
      // 对应组件的参数
      componentProps: {
        placeholder: "请输入",
      },
      // 字段名
      fieldName: "name",
      defaultValue: '',
      // 界面显示的label
      label: "名称",
      rules: "required",
    },
    {
      component: "Select",
      componentProps: {
        allowClear: true,
        filterOption: true,
        options: catelistcom,
        placeholder: "请选择",
        showSearch: true,
      },
      defaultValue: undefined,
      fieldName: "categoryId",
      label: "分类",
      rules: "selectRequired",
    },

    {
      component: "Select",
      componentProps: {
        allowClear: true,
        filterOption: true,
        options: unitlistcom,
        placeholder: "请选择",
        showSearch: true,
      },
      defaultValue: undefined,
      fieldName: "unitCode",
      label: "单位",
      rules: "selectRequired",
    },

  ],
  wrapperClass: "grid-cols-1",
}

);



async function onSubmit() {


  try {
    console.log('表单验证', props.type);

    let temp = await formApi.validateAndSubmitForm()

    if (props.type == 'add') {
      if (!temp) return



      await api.$createnutr({
        ...temp
      })
      open.value = false
      formApi.resetForm()


      message.success('创建成功')
      emits('submit', temp)

    }
    else {
      if (!temp) return


      await api.$updatenutr({
        ...temp
      },
        props.editdata.id)
      open.value = false
      formApi.resetForm()


      message.success('更新成功')
      emits('submit', temp)

    }




  } catch (err) {


    console.log('err', err);

  }


}

const closebtn = () => [

]

</script>
